﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      JQuery Popbox Plugin
    </title>
    <style type="text/css">
html,body,div,form,ul,li{margin:0;padding:0;font-size: 12px;}

h1,h2{margin-left:10px;}
.button{border:none;height:30px;background:#2EBE47;color:#fff;cursor:pointer;margin:10px;}
.button:hover{background:#148327;}
pre,blockquote{margin:10px;padding:10px;border:3px dashed #ddd;background:#eee;color:#333;font-size:14px;line-height:20px;}

    </style>
	<link rel="stylesheet" type="text/css" href="popbox.min.css" />

</head>
  
  <body>
  
  <h1 style="height:50px;background:#ececec;margin:0;line-height:50px;" class="yahei">PopBox - jQuery Plugin</h1>

<!--执行alert-->
<input type="button" onclick="showAlert()" class="button" value="执行alert样式"> <b class="yahei">type : 'alert'</b>
<pre>
function showAlert () {
	Pop({
		type : 'alert',
		msg : '这里是消息内容'
	})
}
</pre>

<!--执行confirm-->	
<input type="button" onclick="showConfirm()" class="button" value="执行confirm样式"> <b class="yahei">type : 'confirm'</b>
<pre>
function showConfirm () {
	Pop({
		type : 'confirm',
		title : '确定如下消息：',
		msg : '你确定这是你选择的吗？'
	})
}
</pre>

<!--执行prompt-->
<input type="button" onclick="showPrompt()" class="button" value="执行prompt样式"> <b class="yahei">type : 'prompt' , mark : false //遮罩层</b>
<pre>
function showPrompt () {
	Pop({
		type : 'prompt',
		title : '请输入裸泳浩',
		mark : false,
		complete : function (data) {
			return data == '裸泳浩' ? (function(){
				alert ('You are right .');
				return true;
			})() : 
			alert ('You are wrong !') ;
		}
	})
}
</pre>

<!--执行prompt ready-->
<input type="button" onclick="showPromptReady()" class="button" value="执行prompt样式，初始化窗口后自动载入内容"> <b class="yahei">ready : function () { ... } //初始化后执行</b>
<pre>
function showPromptReady () {
	Pop({
		type : 'prompt',
		title : '请输入裸泳浩',
		mark : false,
		ready : function () {
			this.element.find('.popInput').val('裸泳浩--自动加载')
		},
		complete : function (data) {
			return data == '裸泳浩' ? (function(){
				alert ('You are right .');
				return true;
			})() : 
			alert ('You are wrong !') ;
		}
	})
}
</pre>

<!--执行confirm loading-->	
<input type="button" onclick="showPromptLoading()" class="button" value="具有loading效果的按钮样式"> <b class="yahei">_this.loading(this.obj.completeObj);</b>
<pre>
function showPromptLoading () {
	Pop({
		type : 'prompt',
		title : '有Loading效果的表单',
		complete : function (data) {
			var _this = this;
			_this.loading(this.obj.completeObj); //调用loading，第一个参数为loading效果button
			
			/*
			可以加入ajax或者自己的验证规则，我这里用timeout延迟执行
			*/
			setTimeout(function(){
				_this.loading(_this.obj.completeObj,'end'); //传递第二个参数end，关闭效果
				_this.close(); //调用close()，关闭窗口
			},1000);
		}
	})
}
</pre>


<!--执行reload-->	
<input type="button" onclick="showWithId()" class="button" value="重新打开窗口，不会进行重载样式">
<input type="button" onclick="showWithIdLoad()" class="button" value="重新打开窗口，会重载样式"> <b class="yahei">id : '需要设定' , reload : false //不重载，不指定id，该参数无效</b>
<pre>
function showWithId () {
	Pop({
		id : 'OnlyPop',
		title : '这个样式不会重载',
		msg : '在后面表单添加内容后关闭，重新打开&lt;br/&gt;&lt;input type="text" name="text" /&gt;',
		reload : false
	})
}

function showWithIdLoad () {
	Pop({
		id : 'OnlyPopLoad',
		title : '这个样式会重载',
		msg : '在后面表单添加内容后关闭，重新打开&lt;br/&gt;&lt;input type="text" name="text" /&gt;'
	})
}
</pre>


<!--执行prompt-->
<input type="button" onclick="showStep()" class="button" value="执行step，多个步骤执行">
<pre>
function showStep(){
	Pop({
		title : '第一步开始', 
		msg : '&lt;span style="color:green;"&gt;你确定要继续吗？&lt;/span&gt;',
		completeText : '进入第二步',
		complete : function () {
		
			this.step({
				title : '第二步开始', 
				msg : '&lt;span style="color:green;"&gt;来到第二步了，还继续吗？&lt;/span&gt;',
				completeText : '进入第三步',
				complete : function () {
					this.step({
						title : '第三步开始', 
						msg : '&lt;span style="color:green">来到第三步了。&lt;/span&gt;',
						completeText : '已经完成',
						cancelText : false,
						complete : function () {
							this.close();
						}
					});
				}
			});
			
		}
	});
}
</pre>

<h1 class="yahei">API</h1>
<blockquote>
加载样式与脚本<br/>
&lt;link rel="stylesheet" type="text/css" href="popbox.min.css" /&gt;<br/>
&lt;script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt;<br/>
&lt;script type="text/javascript" src="popbox.min.js"&gt;&lt;/script&gt;<br/>
如果需要loading效果需要引入loading.gif进来
<br/><br/>


调用方法：Pop({ ... }); <br/>
如果不指定ID的话，PopBox只会初始化一次。默认会生成window.Global_PopBox的实例。<br/>
Pop() 同样会返回一个实例，可以通过 var F = Pop({ ... }) 来调用 <br/>
<b>弹出层样式：</b><br/>
弹出层样式可以通过css设置，<br/>
如果指定type类型后，popBox 层会添加相应的 class = type 到该element <br/>
如果指定id后，popBox 层添加相应的 id = id 到该element，单必须保证该id是唯一的
</blockquote>
<h2 class="yahei">默认参数</h2>
<pre>
	var defaults = {
		id : false, //指定id,用于编辑操作，不会被其他层覆盖掉
		type : 'pop', //弹出层类型
		title : '消息提示', //顶部标题
		msg : '', //内容，支持html，msg
		mark : true, //是否显示遮罩层
		width : 400,
		height : 'auto',
		init : false, //初始化前执行的操作
		ready : false , //初始化后执行的函数，用于表单的编辑操作
		complete : false, //确认事件回调
		cancle : false, //取消后的操作
		close : false, //关闭弹出层的回调
		completeText : '确定', //完成按钮的文字
		cancelText : '取消', //取消按钮的文字
		loadingImg : 'loading.gif', //loading图片的路径
		reload : true //是否需要重载数据，只有设置id才会生效
	}
</pre>
<h2>支持方法</h2>
<blockquote>
	close() : 关闭窗口 <br/>
	loading(element,type) loading效果，只有type指定为end时，才会关闭loading<br/>
	关于回调函数：<br/>
	ready,complete,cancel,close中this指向该实例<br/>
	init 是在初始化弹出层前执行的。<br/>
	默认complete，cancel都会执行关闭层的操作。<br/>
	complete,cancel 中返回 return false 会打断弹出层的关闭,可以通过 this.close() 触发关闭操作 	
</blockquote>

<div style="height:50px;background:#ececec;margin-top:20px;"></div>


<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="popbox.min.js"></script>
 
<script language="JavaScript" type="text/javascript">
function showAlert () {
	Pop({
		type : 'alert',
		msg : '这里是消息内容'
	})
}

function showConfirm () {
	Pop({
		type : 'confirm',
		title : '确定如下消息：',
		msg : '你确定这是你选择的吗？'
	})
}

function showPrompt () {
	Pop({
		type : 'prompt',
		title : '请输入裸泳浩',
		mark : false,
		complete : function (data) {
			return data == '裸泳浩' ? (function(){
				alert ('You are right .');
				return true;
			})() : 
			alert ('You are wrong !') ;
		}
	})
}

function showPromptReady () {
	Pop({
		type : 'prompt',
		title : '请输入裸泳浩',
		mark : false,
		ready : function () {
			this.element.find('.popInput').val('裸泳浩--自动加载')
		},
		complete : function (data) {
			return data == '裸泳浩' ? (function(){
				alert ('You are right .');
				return true;
			})() : 
			alert ('You are wrong !') ;
		}
	})
}

function showWithId () {
	Pop({
		id : 'OnlyPop',
		title : '这个样式不会重载',
		msg : '在后面表单添加内容后关闭，重新打开<br/><input type="text" name="text" />',
		reload : false
	})
}

function showWithIdLoad () {
	Pop({
		id : 'OnlyPopLoad',
		title : '这个样式会重载',
		msg : '在后面表单添加内容后关闭，重新打开<br/><input type="text" name="text" />'
	})
}



function showStep(){
	Pop({
		title : '第一步开始', 
		msg : '<span style="color:green;">你确定要继续吗？</span>',
		completeText : '进入第二步',
		complete : function () {
		
			this.step({
				title : '第二步开始', 
				msg : '<span style="color:green;">来到第二步了，还继续吗？</span>',
				completeText : '进入第三步',
				complete : function () {
					this.step({
						title : '第三步开始', 
						msg : '<span style="color:green">来到第三步了。</span>',
						completeText : '已经完成',
						cancelText : false,
						complete : function () {
							this.close();
						}
					});
				}
			});
			
		}
	});
}

function showPromptLoading () {
	Pop({
		type : 'prompt',
		title : '有Loading效果的表单',
		complete : function (data) {
			var _this = this;
			_this.loading(this.obj.completeObj); //调用loading，第一个参数为loading效果button
			
			/*
			可以加入ajax或者自己的验证规则，我这里用timeout延迟执行
			*/
			setTimeout(function(){
				_this.loading(_this.obj.completeObj,'end'); //传递第二个参数end，关闭效果
				_this.close(); //调用close()，关闭窗口
			},1000);
		}
	})
}
</script>
  
  </body>
</html>
